<template>
  <div id="vuex_test">
    <h1>测试vuex数据共享数据展示</h1>
    <h3>{{ $store.state.myCount }}</h3>

    <h3>显示用户数据</h3>
    <el-table
        :data="userTableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="用户ID"
          width="150">
      </el-table-column>
      <el-table-column
          prop="loginId"
          label="用户帐号"
          width="120">
      </el-table-column>
      <el-table-column
          label="用户状态"
          width="120">
        <template slot-scope="scope">
          {{ scope.row.status === '1' ? '正常' : '禁用'}}
        </template>
      </el-table-column>
      <el-table-column
          label="头像"
          width="120">
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.photoPath"
              fit="fill"></el-image>
          <!--<img :src="scope.photoPath" style="width: 100px; height: 100px">-->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userTableData: []
    }
  },
  created() {
    this.userTableData = this.$store.state.ary
  }
}
</script>

<style>

</style>